<template>
  <div class="mod-config" v-loading="loading">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <line-chart :last7days="last7days" :chart-data="lineChartData" />
    </el-row>
  </div>
</template>
<script>
import PanelGroup from './components/PanelGroup';
import LineChart from './components/LineChart';
var dayjs = require('dayjs');

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};
export default {
  data() {
    return {
      loading: false,
      lineChartData: lineChartData.newVisitis,
      last7days: [],
    };
  },
  components: { PanelGroup, LineChart },
  activated() {
    console.log('home');
  },
  mounted() {
    this.getlast7days();
  },
  methods: {
    getlast7days() {
      var today = new Date();
      // 初始化最近7天的日期数组
      var dates = [];
      for (var i = 7; i > 0; i--) {
        // 计算日期差值，向前推算日期
        var diff = dayjs().subtract(i, 'days').format('YYYY-MM-DD');
        // 将日期加入数组
        dates.push(diff);
        this.last7days = dates;
      }
      console.log(this.last7days, '7天');
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>




<style lang="scss"></style>
